<template>
  <div>
    <el-table
      border
      stripe
      :data="devices"
      :height="height"
    >
      <el-table-column
        label="编号"
        width="80"
        align="center"
      >
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        label="设备类型"
        prop="product.name"
        align="center"
      />
      <el-table-column
        label="名称"
        prop="name"
        align="center"
      />
      <!-- <el-table-column
        label="设备状态"
        prop="status"
        align="center"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status" type="success">有效</el-tag>
          <el-tag v-else type="danger">无效</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column
        label="创建时间"
        prop="created_at"
        align="center"
      />
      <el-table-column
        align="center"
        label="操作"
        width="210"
      >
        <template slot-scope="scope">
          <el-link type="primary" class="mr12" icon="el-icon-edit" @click="edit(scope.row)">修改</el-link>
          <el-link type="warning" class="mr12" icon="el-icon-s-tools" @click="setting(scope.row)">设置</el-link>
          <el-link type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      height: 'calc(100vh - 168px)'
    }
  },
  computed: {
    ...mapGetters(['devices'])
  },
  methods: {
    edit(row) {
      this.$emit('edit', row)
    },
    setting(row) {
      this.$emit('setting', row)
    },
    del(row) {
      this.$emit('del', row)
    },
    changeCurrentPage(val) {
      this.$emit('changeCurrentPage', val)
    },
    changePagesize(val) {
      this.$emit('changePagesize', val)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

